<template>
	<view class="num p-14" style="background-color: #fff;height: 100vh;">
		<block v-if="typeShow==1">
			<view class="mt20">
				绑定新联系电话
			</view>
			<view class="mt20">
				当前联系电话为{{info.mobile||'01234567890'}}，请选择绑定新的手机号码。
			</view>
			<view class="">
				<view class="input_box_check mt-20 relative">
					<u--input placeholder="请绑定新手机号"
						prefixIconStyle="font-size: 22px;color: #909399;width:30rpx;height:30rpx" border="bottom"
						v-model="newMobile" maxlength="11" type="number">
					</u--input>
				</view>
			</view>
			<view class="flex" style="justify-content: center;">
				<view class=""
					style="width: 80%;height: 90rpx;border-radius: 90rpx;background-color: #CEEE5B;text-align: center;line-height: 2.5;margin-top: 40rpx;"
					@click="save(1)">
					提交
				</view>
			</view>
		</block>
		<block v-if="typeShow==2">
			<view class="mt20">
				输入紧急联系电话
			</view>
			<view class="mt20">
				当前联系电话为{{info.contact||'01234567890'}}，请输入其他手机号码作为紧急联系电话。
			</view>
			<view class="">
				<view class="input_box_check mt-20 relative">
					<u--input placeholder="请输入紧急联系电话"
						prefixIconStyle="font-size: 22px;color: #909399;width:30rpx;height:30rpx" border="bottom"
						v-model="newContact" maxlength="11" type="number">
					</u--input>
				</view>
			</view>
			<view class="flex" style="justify-content: center;">
				<view class=""
					style="width: 80%;height: 90rpx;border-radius: 90rpx;background-color: #CEEE5B;text-align: center;line-height: 2.5;margin-top: 40rpx;"
					@click="save(2)">
					提交
				</view>
			</view>
		</block>
		<block v-if="typeShow==3">
			<view class="mt20">
				绑定新登录手机号
			</view>
			<view class="mt20">
				当前联系电话为{{info.mobile||'01234567890'}}，请选择绑定新的手机号码。
			</view>
			<view class="" style="margin-bottom: 60rpx;">

				<view class="input_box_text">
					<u-input placeholder="输入手机号" border="bottom" v-model="newLoginNum" type="number"></u-input>
				</view>
				<view class="input_box_check mt-20 relative">
					<!-- #ifndef APP-NVUE -->
					<u-input placeholder="输入验证码" border="bottom" v-model="checkNum" type="number">
					<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						<u--input placeholder="输入验证码" border="bottom" v-model="checkNum" type="number">
						<!-- #endif -->
							<template slot="suffix">
								<text @tap="sender" style="font-size: 24rpx;">发送验证码</text>
							</template>
					<!-- #ifndef APP-NVUE -->
					</u-input>
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					</u--input>
					<!-- #endif -->


				</view>
				<!-- 
				<view class="input_box_check mt-20 relative">
					<u--input placeholder="请绑定新手机号"
						prefixIconStyle="font-size: 22px;color: #909399;width:30rpx;height:30rpx" border="bottom"
						v-model="newLoginNum" maxlength="11">
						<template slot="suffix">
							<view
								style="font-size: 24rpx; border: 2rpx solid #89BA20;color: #89BA20;height: 60rpx;padding: 0 20rpx;line-height: 2;border-radius: 30rpx;"
								@click="sender">
								获取验证码</view>
						</template>
					</u--input>
					<u--input placeholder="验证码"
						prefixIconStyle="font-size: 22px;color: #909399;width:30rpx;height:30rpx" border="bottom"
						v-model="checkNum"></u--input>
				</view> -->
			</view>
			<view class="flex" style="justify-content: center;">
				<view class=""
					style="width: 80%;height: 90rpx;border-radius: 90rpx;background-color: #CEEE5B;text-align: center;line-height: 2.5;margin-top: 40rpx;"
					@click="save(3)">
					提交
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import {
		profile,
		send,
		checkCaptcha
	} from '@/common/teacherReq';
	export default {
		data() {
			return {
				typeShow: 1,
				newMobile: '', // 新手机号
				newContact: '', // 新紧急联系电话
				newLoginNum: '', // 新登录手机号
				checkNum: '', // 验证码
			};
		},
		computed: {
			info() {
				return uni.getStorageSync('info')
			}
		},
		onLoad(opt) {
			this.typeShow = Number(opt.type)
			if (this.typeShow == 1) {
				uni.setNavigationBarTitle({
					title: '修改联系电话'
				})
			} else if (this.typeShow == 2) {
				uni.setNavigationBarTitle({
					title: '紧急联系电话'
				})
			} else {
				uni.setNavigationBarTitle({
					title: '修改登录手机号'
				})
			}
		},
		methods: {
			save(value) {
				let data = {};
				let mobileNumber = '';
				switch (value) {
					case 1:
						mobileNumber = this.newMobile;
						data = {
							mobile: mobileNumber
						};
						break;
					case 2:
						mobileNumber = this.newContact;
						data = {
							contact: mobileNumber
						};
						break;
					case 3:
						mobileNumber = this.newLoginNum;
						data = {
							mobile: mobileNumber
						};
						break;
				}
				// 17968659315
				// 判断手机号长度
				if (mobileNumber.length !== 11) {
					uni.showToast({
						icon: 'none',
						title: '手机号长度应为11位'
					});
					return;
				}
				if (value == 3) {
					checkCaptcha({
						mobile: this.newLoginNum,
						group_id: 3,
						captcha: this.checkNum,
					}).then(res => {
						if (res.code != 1) {
							uni.showToast({
								icon: 'error',
								title: '验证码错误'
							});
							return;
						}
					})
				}

				profile(data).then(res => {
					uni.showToast({
						icon: 'success',
						title: '修改成功',
						success() {
							uni.switchTab({
								url: '/pages/user/index'
							})
						}
					});
				});
			},
			sender() {
				if (this.newLoginNum.length !== 11) {
					uni.showToast({
						icon: 'none',
						title: '手机号长度应为11位'
					});
					return;
				}
				send({
					mobile: this.newLoginNum,
					group_id: 3
				}).then(res => {
					uni.showToast({
						icon: 'success',
						title: '发送成功'
					});
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.num {
		.input_box_check {
			padding: 24rpx;
			// background-color: #d8d8d8;
			border-radius: 100rpx;
			height: 76rpx;
			line-height: 76rpx;
			font-size: 24rpx;
		}

		.input_box_text {
			padding: 16rpx;
		}

		.input_box_check {
			padding: 0 24rpx;

			.check_btn {
				position: absolute;
				// right: 30rpx;
				// top: 10rpx;
				font-size: 27rpx;
				color: #444444;
			}
		}

	}
</style>